<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>标题</h1>
		<div id="div01"></div>
		<div id="div02"></div>
		
		<h1>1. 修改元素的内容</h1>
		
		<script>
			// var div01 = document.getElementById("div01");
			// .textContext 修改文本内容
			div01.textContent = "你好"
			// .innerHTML   修改html代码
			div02.innerHTML = "<a href='https://www.baidu.com'>百度</a>"
			
		</script>
		
		<h1>2. 修改元素的属性</h1>
		<input type="checkbox" id="input1" name="like"/>踢球
		<input type="checkbox" id="input2" name="like"/>打游戏
		<script>
			// 通过.访问元素属性
			input1.checked = "checked";
			input2.disabled = "disabled";
		</script>
		
		<h1>3. 修改元素的样式</h1>
		<div id="div03">一段文本</div>
		<script>
			// 通过 .style属性 控制样式
			console.log(div03)
			div03.style.width = "100px";  // 必须带上单位 字符串
			div03.style.height = "100px";
			div03.style.backgroundColor = "#0000ff";
			
		</script>
		
		
	</body>
</html>